import { useEffect, useState } from 'react';

import { Meta, StoryFn } from '@storybook/react';

import { PixelProgressProps } from '../types';
import PixelProgress from './pixel-progress';

/**
 * 像素风格进度条组件的Storybook故事
 * 展示不同配置和用例
 */
const meta: Meta<typeof PixelProgress> = {
  title: 'Components/PixelProgress',
  component: PixelProgress,
  argTypes: {
    progress: { control: { type: 'range', min: 0, max: 100, step: 1 } },
    width: { control: 'text' },
    height: { control: 'text' },
    pixelSize: { control: { type: 'range', min: 1, max: 10, step: 1 } },
    pixelGap: { control: { type: 'range', min: 0, max: 5, step: 1 } },
    backgroundColor: { control: 'color' },
    fillColor: { control: 'color' },
    showPercentage: { control: 'boolean' },
    textColor: { control: 'color' },
    animationDuration: {
      control: { type: 'range', min: 0, max: 2000, step: 100 },
    },
  },
};

export default meta;

/**
 * 基础模板，用于创建不同的故事变体
 */
const Template: StoryFn<typeof PixelProgress> = (args: PixelProgressProps) => (
  <PixelProgress {...args} />
);

/**
 * 动态进度模板，用于展示进度变化效果
 */
const DynamicTemplate: StoryFn<typeof PixelProgress> = (
  args: PixelProgressProps,
) => {
  // 创建一个状态来模拟进度变化
  const [progress, setProgress] = useState(0);

  // 模拟进度增长
  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prevProgress) => {
        if (prevProgress >= 100) {
          clearInterval(timer);
          return 100;
        }
        return prevProgress + 1;
      });
    }, 100);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      <PixelProgress {...args} progress={progress} />
      <button
        onClick={() => {
          setProgress(0);
        }}
        style={{ marginTop: '10px', padding: '5px 10px' }}
      >
        重置
      </button>
    </div>
  );
};

/**
 * 默认进度条，展示50%进度
 */
export const Default = Template.bind({});
Default.args = {
  progress: 50,
  width: '300px',
  height: '20px',
};

/**
 * 完成状态的进度条，展示100%进度
 */
export const Completed = Template.bind({});
Completed.args = {
  progress: 100,
  width: '300px',
  height: '20px',
  fillColor: '#4caf50',
};

/**
 * 自定义颜色的进度条
 */
export const CustomColors = Template.bind({});
CustomColors.args = {
  progress: 75,
  width: '300px',
  height: '20px',
  backgroundColor: '#e0e0e0',
  fillColor: '#ff5722',
  textColor: '#333333',
};

/**
 * 大像素块的进度条
 */
export const LargePixels = Template.bind({});
LargePixels.args = {
  progress: 60,
  width: '300px',
  height: '30px',
  pixelSize: 8,
  pixelGap: 2,
};

/**
 * 无间隙像素的进度条
 */
export const NoGap = Template.bind({});
NoGap.args = {
  progress: 40,
  width: '300px',
  height: '20px',
  pixelSize: 5,
  pixelGap: 0,
};

/**
 * 不显示百分比文本的进度条
 */
export const NoPercentage = Template.bind({});
NoPercentage.args = {
  progress: 65,
  width: '300px',
  height: '20px',
  showPercentage: false,
};

/**
 * 快速动画的进度条
 */
export const FastAnimation = Template.bind({});
FastAnimation.args = {
  progress: 80,
  width: '300px',
  height: '20px',
  animationDuration: 100,
};

/**
 * 高度自定义的进度条
 */
export const FullyCustomized = Template.bind({});
FullyCustomized.args = {
  progress: 85,
  width: '400px',
  height: '40px',
  pixelSize: 10,
  pixelGap: 3,
  backgroundColor: '#121212',
  fillColor: '#8e44ad',
  textColor: '#ffffff',
  animationDuration: 500,
};

/**
 * 动态进度变化的进度条
 */
export const DynamicProgress = DynamicTemplate.bind({});
DynamicProgress.args = {
  width: '300px',
  height: '20px',
  fillColor: '#4caf50',
};

/**
 * 动态进度变化的自定义颜色进度条
 */
export const DynamicCustomColors = DynamicTemplate.bind({});
DynamicCustomColors.args = {
  width: '300px',
  height: '20px',
  backgroundColor: '#222',
  fillColor: '#ff5722',
  textColor: '#fff',
};

/**
 * 动态进度变化的自定义大小和像素块进度条
 */
export const DynamicCustomSize = DynamicTemplate.bind({});
DynamicCustomSize.args = {
  width: '300px',
  height: '30px',
  pixelSize: 6,
  pixelGap: 2,
  fillColor: '#2196f3',
};
